<template>
	<view class="warp">
		<u-tabs :list="list" :is-scroll="false" activeColor="#35c877" :current="current" @change="change"></u-tabs>
		<view class="message_list">
			<navigator url="#" class="item" hover-class="none">
				<view class="mes_box">
					<view class="name">济态市场APP、小程序上线</view>
					<view class="time">2019-10-31 14:30:52</view>
					<view class="em">未读</view>
				</view>
				<view class="content_body">杭州琻泰环境科技有限公司是一家以自主研发为主导，创新先进技术输出为基础的科技型集团化公司。</view>
			</navigator>
			<navigator url="#" class="item" hover-class="none">
				<view class="mes_box">
					<view class="name">济态市场APP、小程序上线</view>
					<view class="time">2019-10-31 14:30:52</view>
					<view class="em">未读</view>
				</view>
				<view class="content_body">杭州琻泰环境科技有限公司是一家以自主研发为主导，创新先进技术输出为基础的科技型集团化公司。</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '资金'
				}, {
					name: '帐号'
				}, {
					name: '系统',
					count: 5
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}
	.message_list {
		width: 100%;
		padding: 28rpx 28rpx 8rpx 28rpx;
		
		.item {
			width: 100%;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			
			.mes_box {
				width: 100%;
				padding: 22rpx 28rpx;
				border-bottom: 2rpx solid #eee;
				position: relative;
				
				&::after {
					width: 14rpx;
					height: 14rpx;
					position: absolute;
					left: -8rpx;
					top: 36rpx;
					border-radius: 20rpx;
					background: #ffa911;
					border: 4rpx solid #f1f1f1;
					content: '';
				}
				.name {
					font-size: 34rpx;
					color: #000;
					padding-bottom: 6rpx;
				}
				.time {
					font-size: 24rpx;
					color: #999;
				}
				.em {
					position: absolute;
					right: 22rpx;
					top: 28rpx;
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					border-radius: 40rpx;
					background: #ffa911;
					color: #fff;
				}
			}
			.content_body {
				padding: 22rpx 28rpx;
				color: #999;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}
	}
</style>
